<template>
  <div class="header-container">
    <!--LOGO位置-->
    <div class="logoin"  @click="goToHome" >
      <div class="logo-container">
        <img src="../img/logo.png" width="60px" height="60px" />
        <span>电子仓鼠</span>
      </div>
    </div>
    <!-- 搜索框和按钮 -->
    <div class="search-container">
      <input placeholder="请输入搜索内容" class="search-input"/>
      <lay-button type="normal" radius class="search-button">
        <img src="../img/sosuo.svg"/> 搜索
      </lay-button>
    </div>
    <!-- 菜单栏或登录按钮根据登录状态显示 -->
    <div v-if="isLoggedIn">
      <Afterloggingin /> <!-- 用户已登录时显示菜单栏 -->
    </div>
    <div v-else>
      <Chone /> <!-- 用户未登录时显示登录按钮 -->
    </div>
  </div>
</template>

<script setup>
import Afterloggingin from "@/components/homepage/afterloggingin/Afterloggingin.vue";
import Chone from "@/components/homepage/popups/Chone.vue";
import "./Navigationbar.css";

import { ref, onMounted } from "vue";
import router from "@/router/index.js";

// 假设 isLoggedIn 为响应式变量，表示用户的登录状态
const isLoggedIn = ref(false);

// 在组件挂载时检查 localStorage 中的用户数据
onMounted(() => {
  const user = localStorage.getItem("user");
  if (user) {
    isLoggedIn.value = true; // 如果 localStorage 中有用户数据，则表示已登录
  } else {
    isLoggedIn.value = false; // 否则表示未登录
  }
});

const goToHome = () => {
  router.push("/"); // 跳转到首页，假设首页路由是 '/'
};
</script>
